<template>
  <div class="Createcourse">
    <div class="Createcourse-title">入驻机构</div>
    <div class="Createcourse-content">
      <label class="Createcourse-type">
        <span>
          <i>*</i> 机构类型
        </span>
        <el-select v-model="Bodytypes" value-key="label" @change="ChangeClasstypes">
          <el-option v-for="item in Bodytype" :key="item.label" :label="item.value" :value="item"></el-option>
        </el-select>
      </label>
      <div v-if="isunion" class="isunion">
        <label class="Createcourse-type">
          <span>
            <i>*</i> 负责人姓名
          </span>
          <el-input v-model="Name" placeholder="请输入负责人姓名"></el-input>
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i> 负责人职位
          </span>
          <el-input v-model="Positionincharge" placeholder="请输入负责人职位"></el-input>
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i> 负责人电话
          </span>
          <el-input type="number" v-model="principaltelephone" placeholder="请输入负责人电话"></el-input>
        </label>
        <div class="iconbuttons">
          <span @click="Toexits">取消</span>
          <span class="submist" @click="associationin">提交</span>
        </div>
      </div>
      <div v-else class="isunion">
        <label>
          <span>
            <i>*</i> 公司LOGO
          </span>
          <el-upload
            class="avatar-uploader"
            :action="domain"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUploadGetKey"
            :data="QiNiYun"
            >
            <img v-if="LOGOimageUrl" :src="LOGOimageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i>机构名称
          </span>
          <el-input v-model="mechanism_name" placeholder="请输入机构名称"></el-input>
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i>机构地址
          </span>
          <el-input v-model="mechanism_addr" disabled placeholder="请输入机构地址"></el-input>
          <img src="/images/椭圆 31@2x.png" @click="mapshow" alt="" class="adds">
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i>机构电话
          </span>
          <el-input v-model="mechanism_telephone" placeholder="请输入机构电话"></el-input>
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i>教学语言
          </span>
          <el-select v-model="mechanism_language" value-key="value" @change="languagechanges" placeholder="选择教学语言">
                        <el-option
                            v-for="item in languageTranslate"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
          <!-- <el-input v-model="mechanism_language" placeholder="请输入教学语言"></el-input> -->
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i>负责人姓名
          </span>
          <el-input v-model="contacts" placeholder="请输入负责人姓名"></el-input>
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i> 负责人职位
          </span>
          <el-input v-model="contacts_title" placeholder="请输入负责人职位"></el-input>
        </label>
        <label class="Createcourse-type">
          <span>
            <i>*</i>机构优势
          </span>
          <el-input  type="textarea" show-word-limit maxlength="200" v-model="mechanism_advantage" placeholder="请输入机构优势"></el-input>
        </label>
        <label>
          <span>
            <i>*</i>图片简介
          </span>
          <el-upload
            :action="domain"
            list-type="picture-card"
            :data="QiNiYun"
            :on-success="handleAvatarSucce"
            :before-upload="beforeUploadGetKey"
            :auto-upload="true">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </label>
        <label>
          <span>
            <i>*</i> 相关证明材料
          </span>
          <el-upload
            :action="domain"
            list-type="picture-card"
            :data="QiNiYun"
            :on-success="handleAvatarfor"
            :before-upload="beforeUploadGetKey"
            :auto-upload="true">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <span class="mustinfo">（营业执照和教学资格证必传）</span>
        </label>
        <label class="note">
          <span>注：照片仅供平台审核使用，绝不对外展示！</span>
        </label>
        <div class="iconbuttons">
          <span @click="Toexits">取消</span>
          <span class="submist" @click="Institutions">提交</span>
        </div>
      </div>
      <Map v-show="Isshow" :Isshow.sync ='Isshow' :latitude.sync='latitude' :longitude.sync='longitude' :mechanism_addr.sync="mechanism_addr" @child-event="paerens"></Map>
    </div>
  </div>
</template>
<script>
import languageTranslate from '../../../../public/citys/languages'
import Map from '../../../components/map'
export default {
  name: "agencyCertification",
  data() {
    return {
      Bodytypes:'培训机构',
      Bodytype:[
        {
          label: "Traininginstitutions",
          value: "培训机构",
          id: 1
        },
        {
          label: "union",
          value: "工会",
          id: 2
        }
      ],
      isunion:false,
      Name:'',
      Positionincharge:'',
      principaltelephone:'',
      userinfo:JSON.parse(localStorage.getItem('userinfo')),
      LOGOimageUrl: '',
      dialogImageUrl: '',
      imageUrl:'',
      dialogVisible: false,
      disabled: false,
      filelist:'',
      QiNiYun: {
        key: "",
        token: ""
      },
      QiNiYuns: {
        key: "avatoravatoravatorasss",
        token: ""
      },
      QiNiYunss: {
        key: "avator",
        token: ""
      },
      domain: "http://up-z0.qiniup.com",
      qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
      upload_qiniu_addr: "http://img.curiousmore.com/",
      Isshow:false,
      //机构入驻信息
      mechanism_name:'',
      mechanism_addr:'',
      mechanism_telephone:'',
      mechanism_language:'',
      contacts:'',
      contacts_title:'',
      mechanism_advantage:'',
      latitude:'',
      longitude:'',
      introduction_pic:'',
      support_means:'',
      languageTranslate:[],
      dialogFormVisible: false,
      form:[]
    };
  },
  created(){
    this.languageTranslate = languageTranslate.languageTranslate
  },
  mounted() {
    this.getQiniuToken();
  },
  components: {//组件注册
    Map
  },
  methods: {
    paerens(data){
      console.log(data)
    },
    languagechanges(e){//教学语言选择
        this.mechanism_language =e
        console.log(this.mechanism_language)
    },
    ChangeClasstypes(e) {//机构类型
      console.log(e);
      if(e.label =='union'){
        this.isunion =true
      }else{
        this.isunion = false
      }
    },
    associationin(){//工会入驻
      if(this.Name ==''&&this.Positionincharge ==''&&this.principaltelephone ==''){
        alert("请输入负责人姓名")
      }else if(!(/^1[3456789]\d{9}$/.test(this.principaltelephone))){ 
        alert("手机号码有误，请重填");  
      }else{
        var data = {
          contact_telephone:this.principaltelephone,
          contacts:this.Name,
          contacts_title:this.Positionincharge,
          user_id:this.userinfo.user_id,
          type:'online_mechanism'
        }
        this.$axios({
          method:'post',
          url:'http://101.37.66.151:8768/eg-api/user/mastermechanism/insert',
          data:data,
        }).then((response) =>{
          console.log(response,'我收到的礼物')
          if(response.data.message =="成功"){
            this.$router.go(-1);
          }
        }).catch((error) =>{
          console.log(error)
        })
      }
    },
    Toexits(){//取消
      this.$router.go(-1);
    },
    Institutions(){//机构入驻
      console.log(this.longitude,'---')
      var data = {
          mechanism_name:this.mechanism_name,
          mechanism_addr:this.mechanism_addr,
          mechanism_telephone:this.mechanism_telephone,
          user_id:this.userinfo.user_id,
          type:'offline_mechanism ',
          mechanism_language:this.mechanism_language,
          contacts:this.contacts,
          contacts_title:this.contacts_title,
          mechanism_advantage:this.mechanism_advantage,
          mechanism_logo:this.LOGOimageUrl,
          longitude:this.longitude,
          latitude:this.latitude,
          introduction_pic:this.introduction_pic,
          support_means:this.support_means
        }
        this.$axios({
          method:'post',
          url:'http://101.37.66.151:8768/eg-api/user/mastermechanism/insert',
          data:data,
        }).then((response) =>{
          console.log(response,'我收到的礼物')
          if(response.data.message =="成功"){
            this.$router.go(-1);
          }
        }).catch((error) =>{
          console.log(error)
        })
    },
    handleAvatarSuccess(res, file) {
      this.LOGOimageUrl = this.upload_qiniu_addr + res.key;
    },
    handleAvatarfor(res,file){//证明材料
      var _this = this
      if(_this.support_means.length == 0){
        _this.support_means =  _this.upload_qiniu_addr + res.key
      }else{
        _this.support_means = _this.support_means + ','+ _this.upload_qiniu_addr + res.key
      }
    },
    handleAvatarSucce(res, file){//图片介绍
      var _this = this
      if(_this.introduction_pic.length == 0){
        _this.introduction_pic =  _this.upload_qiniu_addr + res.key
      }else{
        _this.introduction_pic = _this.introduction_pic + ','+ _this.upload_qiniu_addr + res.key
      }
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(res,file) {
      this.dialogImageUrl =this.upload_qiniu_addr + res.key;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl,'0000')
    },
    beforeUploadGetKey() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuToken();
    },
    handleDownload(file) {
      console.log(file);
    },
    getQiniuToken() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        data: data
      })
        .then(response => {
          this.QiNiYun.token = response.data.data;
          this.QiNiYun.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    mapshow(){
      var _this = this
      _this.Isshow = true
    }
  }
};
</script>
<style lang="less" scoped>
.Createcourse {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  min-height: 1600px;
}
.Createcourse-title {
  position: relative;
  width: 90%;
  height: 90px;
  margin: 0 auto;
  display: flex;
  font-size: 20px;
  align-items: center;
  border-bottom: 1px solid #47cecf;
  color: #2dc7c8;
  font-weight: bold;
  letter-spacing: 8px;
  padding-left: 20px;
  background-image: url('/images/形状 3png.png');
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-size: 12px 17px;
}
.Createcourse-content {
  position: relative;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.Createcourse-content > label {
  display: flex;
  width: 100%;
  margin-top: 40px;
  span {
    width: 14%;
    i {
      color: #ff7336;
    }
  }
}
.Createcourse-type {
  // height: 60px;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
    /deep/.el-input{
        width: 100%;
    }
  }
  /deep/.el-select {
    width: 50%;
    border: #cecece;
  }
  align-items: center;
  /deep/.el-textarea{
    width: 50%;
    border: #cecece;
    height: 107px;
    /deep/.el-textarea__inner{
      height: 107px;
    }
  }
}
.isunion{
  position: relative;
  width: 100%;
  label{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    span {
    width: 14%;
        i {
          color: #ff7336;
        }
    }
    /deep/.el-input{
      width: 50%;
    border: #cecece;
    }
  }
}
.iconbuttons{
  position: relative;
  width: 70%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
  // justify-content: center;
  span{
    display: inline-block;
    width:180px;
    height:42px;
    background:rgba(222,222,222,1);
    border-radius:21px;
    text-align: center;
    line-height: 42px;
    font-size: 16px;
    margin-left: 40px;
    cursor: pointer;
  }
}

//公司logo上传
 .isunion /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .isunion /deep/.el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .isunion /deep/.el-upload-list__item{
    width: 100px;
    height: 100px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  //公司logo上传end
  .mustinfo{
    width: auto!important;
    align-items: center;
    color: #47CECF;
    font-size: 14px;
    line-height: 100px;
  }
  .note>span{
    width: auto!important;
    color: #FF7E7E;
    font-size: 14px;
    margin-left: 14%;
  }

  .adds {
    width: 11px;
    height: 13px;
    cursor: pointer;
    position: absolute;
    left:62%;
  }
  .submist{
    background: #3ACBCC!important;
    color: #ffffff;
    
  }
 
</style>